function renderItem(tree, curId = '', h, deep = 0) {
  let fn = function(node) {
    return `<span>${node.name}</span>`
  }
  if (h) { fn = h }
  let $pointLine = ''
  if (deep > 0) {
    $pointLine = `<div class="tree-point-line" style="left: ${deep * 20}px"></div>`
  }
  let $loading = ''
  if (tree.loading) {
    $loading = `<i class="fa fa-spinner fa-pulse"></i>`
  }
  if (tree.children) {
    let $list = ''
    tree.children.forEach((item) => {
      $list += renderItem(item, curId, fn, deep + 1)
    })
    const $listLine = `<div class="tree-list-line" style="left: ${deep * 20}px"></div>`
    return `<div class="tree-item ${tree.id === curId ? 'active' : ''}">
            ${$pointLine}
            <div class="tree-title" style="padding-left: ${deep * 20 + 10}px">
              <i class="fa fa-caret-down"></i>
              ${fn(tree)}
              ${$loading}
            </div>
            <div class="tree-list">${$listLine}${$list}</div>
          </div>`
  } else {
    return `<div class="tree-item ${tree.id === curId ? 'active' : ''}">
            ${$pointLine}
            <div class="tree-title" style="padding-left: ${deep * 20 + 10}px">
              ${fn(tree)}
            
              ${$loading}
            </div>
          </div>`
  }
}
export default renderItem
